@import "util";
@import "../common/rem.less";
#OKRsSelectView {
    .select-title {
        .bottom_line();
        .flex-layout(center);
        .px2rem(height, 82);
        .px2px(font-size, 28);
        color: #2D2D2D;
        margin: 0;
        padding: 0;
        .px2rem(line-height, 80);
        .selected::after {
            .rotate(-180deg);
        }
        li {
            position: relative;
            .flex(1);
            width: 0;
            text-align: center;
            .px2rem(padding-left, 32);
            .px2rem(padding-right, 32);
            overflow: hidden;
            white-space: nowrap;
            span {
                position: relative;
                display: inline-block;
                .px2rem(padding-right, 10);
                .ellipsis();
                max-width: 90%;
            }
            &::after {
                position: absolute;
                font-family: 'icomoon';
                .px2px(font-size, 16);
                content: '\E907';
                //top:10%;
                color: #F76A75;
                //.transition(.3s, all);
            }
        }
        li + li::before {
            position: absolute;
            content: '';
            top:50%;
            left:0;
            width:1px;
            .px2rem(height, 30);
            .translate3d(0, -50%, 0);
            background: #DDD;
        }

    }
    .select-view {

       position: relative;
        width: 100%;
        z-index: 99;
        background: #fff;
        .selected {
            i {
                .rotate(-180deg);
            }
        }
        font-size: 0;
        .team-tab {
            color: #969696 !important;
            background-color: #f0f4f6 !important;
            .px2rem(line-height, 60) !important;
            .px2rem(font-size, 26) !important;
            .px2rem(height, 60) !important;
            .px2rem(padding-left, 30);
            .px2rem(padding-right, 30);
            i {
                display: inline-block;
                .px2px(font-size, 16);
                .px2rem(margin-left, 12);
                color: #F76A75;
                transform: rotate(180deg);
            }
        }
        .team-select {
            i {
                transform: rotate(0deg);
            }
            &::after {
                position: absolute;
                content: '\E909';
                font-family: 'icomoon';
                top: 50%;
                .px2rem(right, 30);
                color: #F76A75;
                .px2px(font-size, 28);
                .translate3d(0, -50%, 0);

            }
        }
        .team-item-select {
            &::after {
                position: absolute;
                content: '\E909';
                font-family: 'icomoon';
                top: 50%;
                .px2rem(right, 30);
                color: #F76A75;
                .px2px(font-size, 28);
                .translate3d(0, -50%, 0);

            }
        }
        .select-list, .select-left-list, .select-right-list {
            -webkit-overflow-scrolling: touch;
            overflow-y: scroll;
            width: 100%;
            color: #2d2d2d;
            background: #fff;
            .px2px(font-size, 30);
            list-style: none;
            display: none;
            margin: 0;
            padding: 0;
            li {
                .arrow-right {
                    color: #A3BFDD;
                    position: absolute;
                    .px2rem(right, 35);
                    .px2rem(top, 3);
                }
                .other-dept-name, .other-person-name {
                    position: absolute;
                    .px2rem(right, 80);
                    color: #FA6771;
                }
                position: relative;
                .px2rem(height, 100);
                .px2rem(line-height, 100);
                .px2rem(padding-left, 30);
                .px2rem(padding-right, 30);
                &::before {
                    position: absolute;
                    content: '';
                    top:0;
                    left: 0;
                    width: 100%;
                    height: 1px;
                    background: #DDD;
                }
                .px2rem(margin-top, 1);

                &:nth-child(1){
                    //&::before {
                    //    position: absolute;
                    //    content: '';
                    //    top:0;
                    //    left: 0;
                    //    width: 100%;
                    //    height: 1px;
                    //    background: none;
                    //}
                }

            }
            .selected {
                &::after {
                    position: absolute;
                    content: '\E909';
                    font-family: 'icomoon';
                    top: 50%;
                    .px2rem(right, 30);
                    color: #F76A75;
                    .px2rem(font-size, 36);
                    .translate3d(0, -50%, 0);

                }
            }
        }
    }
    .select-view-mask {
        display: none;
        position: absolute;
        .px2rem(top, 90);
        left: 0;
        right: 0;
        bottom: 0;
        background: #000;
        opacity: .5;
        z-index: 20;

    }
}
